<template>
	<div id="categoty">
        <el-button type="primary" plain  size='small' @click=showdig>新增</el-button>

{{informations}}

        <div id="table">
          <el-table
                :data="informations"
                style="width: 100%">
                <el-table-column
                  type="index"
                  label="序号"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="名称"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="no"
                  label="排序号"
                  width="180">
                </el-table-column>
                <el-table-column
                  prop="description"
                  label="描述">
                </el-table-column>
                <el-table-column
                  fixed="right"
                  width="200"
                  label="操作">
                    <template slot-scope="scope">
                           <el-button
                             size="mini"
                             @click="handleEdit(scope.row)">编辑</el-button>
                           <el-button
                             size="mini"
                             type="danger"
                             @click="handleDelete(scope.row.id)">删除</el-button>
                         </template>
                </el-table-column>
              </el-table>

        </div>
        <!-- 模态框开始-->
        <el-dialog :title="title" :visible.sync="dialogFormVisible">
          {{form}}
          <el-form :model="form">
            <el-form-item label="产品名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="序号" :label-width="formLabelWidth">
              <el-input v-model="form.no" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="栏目介绍" :label-width="formLabelWidth">
              <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="form.description">
              </el-input>
            </el-form-item>

          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click = "add">确 定</el-button>
          </div>
        </el-dialog>
        <!-- 模态框结束-->
	</div>
</template>

<script type="text/javascript">
import {mapActions,mapState} from 'vuex'
 export default {
     data() {
            return {
              dialogFormVisible:false,
              form:{},
              formLabelWidth: '90px',
              title:'新增栏目信息'
            }
          },
          methods:{
              ...mapActions('information',['getInformation','addInformation','delInformation']),
              showdig(){
              this.dialogFormVisible = true
              },
              // 提交
              add(){
                // this.addInformation(this.form).then(res=>{
                //   this.getInformation()
                // })
                // this.dialogFormVisible = false
                      this.addInformation(this.form).then(res =>{
                        console.log(res,'///////////////////');
                        if(res.status === 200){
                          this.dialogFormVisible = false
                          this.getInformation()
                          this.$message({
                            type: 'success',
                            message:res.message
                          })
                        }else {
                          this.$message({

                            type: 'error',
                            message:res.message
                          })
                        }
                      })



              },
              // 编辑栏目信息
              handleEdit(data){
      // 将当前行的内容，赋值给我们的ruleForm
        this.form = data
        this.title = '编辑栏目信息'
      //打开模态框
        this.dialogFormVisible = true
    },
    // 删除
    handleDelete(id) {
              let params = {
                id,
              }

      this.delInformation(params).then(res =>{
          if(res.status === 200){
            this.getInformation()
            this.$message({
              type:'success',
              message: res.message,

            })
          }else {
              this.$message({
              type:'error',
              message: res.message
            })
          }
        })
      },


          },
          computed:{
            ...mapState('information',['informations'])
          },
          created(){
            this.getInformation()

          },


  }
</script>

<style type="text/css">
  #categoty{
    padding: 10px;
    margin: 10px;

  }


</style>
